<template>
	<view id="containner">
		<view class="banner">
			<uni-search-bar radius="100" placeholder="搜索" bgColor="#EEEEEE" @confirm="toCourse" />
			<!-- 轮播图 -->
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<image :src="item.img_url" style="width: 100%; height: 100%; background-color: #eeeeee;"
						lazy-load />
				</swiper-item>
			</swiper>
		</view>
		<block v-for="i in course" :key="i.id">
			<view class="course">
				<text class="recommend">{{i.title}}</text>
				<view @click="more" class="more">加载更多<uni-icons type="right" size="14" color="#999"></uni-icons>
				</view>
			</view>
			<view class="card-container">
				<view class="card-list">
					<view class="card" v-for="item in i.course" :key="item.id" @click="toDetial(item.id)">
						<view class="top">
							<view class="type">
								{{ "课程" }}
							</view>
							<image :src="item.thumb" lazy-load></image>
						</view>
						<view class="bottom">
							<text>{{ item.title }}</text>
							<br>
							<view class="pic-data" style="display: flex;align-items: center;">
								<view class="pic"
									style="width: 60rpx;height: 60rpx;overflow: hidden;border-radius: 50%;border: 2rpx solid #e8e2e2;">
									<!-- <image style="width: 80rpx;height: 80rpx;" v-show="!onShow" :src="placeholder" /> -->
									<image style="width: 60rpx;height: 60rpx;" :src="item.teacher.photo" mode=""
										lazy-load></image>
								</view>

								<text class="info">授课人：{{ item.teacher.name }}</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</block>
		<view class="course">
			<text class="recommend">推荐文章</text>
			<view @click="toActivle" class="more">加载更多<uni-icons type="right" size="14" color="#999"></uni-icons>
			</view>
		</view>
		<view class="recommendArticle">
			<view class="article" v-for="(item,index) in article" :key="index" @click="toArticleDetail(item.id)">
				<image v-if="item.thumb" :src="item.thumb" mode="" lazy-load></image>
				<view class="right">
					<view class="right-text" style="margin-bottom: 25px;">
						<text>{{item.title}}</text>
					</view>
					<view class="bottom">
						<view class="text">{{ item.author }}</view>
						<view>{{item.create_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 50px;"></view>
	</view>
</template>

<script>
	import {
		index
	} from '@/api/home.js';
	import {
		mixin
	} from '../../static/mixin.js'

	export default {
		mixins: [mixin],
		data() {
			return {
				article: [],
				banner: [],
				course: [],
				searchValue: '',
				liveData: [],
				placeholder: "../../static/loading.gif", // 占位符图片,
				onShow: false
			}
		},
		created() {
			let that = this;
			index().then(res => {
				that.banner = res.banner;
				that.article = res.article.list;
				that.course = res.course;
				console.log(that.course);
			})
		},
		methods: {
			imageLoad() {
				this.onShow = true
			},
			imageError(e) {

			},
			toActivle() {
				uni.navigateTo({
					url: '/pages/article/index'
				})
			},
			more() {
				uni.navigateTo({
					url: `/pages/course/index`,
				})
			},
			toDetial(id) {
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			toArticleDetail(id) {
				uni.navigateTo({
					url: `/pages/article/detail/index?id=${id}`
				})
			},
			toCourse(value) {
				uni.navigateTo({
					url: `/pages/course/index?search=${value.value}`,
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>


<style scoped lang="scss">
	@import '../../static/font.scss';

	.banner {
		position: relative;

		uni-search-bar {
			width: 100%;
			position: absolute;
			z-index: 99;
			opacity: 0.7;
		}

	}

	.card-container {
		display: flex;
		width: 100%;
		height: 480rpx;
		justify-content: flex-start;
		align-items: center;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.card-container::-webkit-scrollbar {
		display: none;
	}

	.card-list {
		// width: 100%;
		height: 100%;
		display: flex;
		border-radius: 10px;
	}

	.card {
		width: 200px;
		// background-color: #ff1418;
		white-space: normal;
		box-sizing: border-box;
		margin: 10px;
		box-shadow: 2px 12px 25px 4px #f1f1f1;
		border-radius: 10px;

		.top {
			width: 100%;
			// height: 100%;
			position: relative;
			overflow: hidden;
			border-radius: 10px;

			image {
				width: 100%;
				border-radius: 10px;
			}

			.type {
				position: absolute;
				right: 10px;
				top: 10px;
				padding: 3px;
				color: $uni-text-color-white;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 5px;
				font-size: 14px;
			}

			image {
				height: 260rpx;
			}
		}

		.bottom {
			width: 100%;
			padding: 10px;
			position: relative;

			text {
				width: 90%;
				display: inline-block;
				font-size: $uni-text-size-md;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.info {
				flex: 1;
				color: $uni-text-color-grey;
				font-size: 14px;
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				padding-left: 30rpx;
				text-overflow: ellipsis;
			}

			.bottom {
				view {
					color: $uni-text-color-grey;
					font-size: 14px;
				}

				.botLeft {
					color: red;
					font-size: 16px;
				}

				width: 80%;
				position: absolute;
				bottom: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	.course {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		padding-top: 10px;
		padding-bottom: 0px;
		display: flex;
		justify-content: space-between;
		background-color: #f8f8f8;
		align-items: center;

		.recommend {
			font-size: 20px;
			font-weight: 700;
		}

		.more {
			width: 150rpx;
			font-size: 14px;
			color: $uni-text-color-grey;
		}
	}

	.recommendArticle {
		margin: 10px;
		background-color: #fff;

		.right-text {
			text {
				font-size: $uni-text-size-md !important;
			}
		}
	}

	.article {
		margin-top: 10px;
		display: flex;

		image {
			height: 80px;
			width: 110px;
		}

		.right {
			width: 100%;
			margin-left: 10px;
			position: relative;


			text {
				font-size: 19px;
			}

			.bottom {
				view {
					color: $uni-text-color-grey;
					display: inline-block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				position: absolute;
				bottom: 0px;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	swiper {
		height: 400rpx;
	}
</style>
